import { defineComponent, watchEffect } from 'vue'

import Songlists from 'components/Songlists'

import useAsyncFn from 'hooks/useAsyncFn'
import personalizedApis from 'apis/personalized'

import styles from './style.module.scss'

export default defineComponent({
  name: '',
  setup() {
    const [state, personalizedSonglistFn] = useAsyncFn(
      personalizedApis.getPersonalizedSonglist,
    )
    personalizedSonglistFn({ limit: 10 })

    return () => {
      const { result: songlist = [], loading: isGettingSonglist } = state || {}
      console.log('songlist', songlist)
      return (
        <>
          <div class={styles.title}>
            <span>推荐歌单</span>
            <i class="iconfont icon-xiangyou"></i>
          </div>
          {isGettingSonglist ? <spinner /> : <Songlists data={songlist} />}
        </>
      )
    }
  },
})
